<template>
    <div>
        <h1>{{ $route.params.id }}</h1>
        <h1>{{ result.name }}</h1>
        <h1>{{ detail.height1 }}</h1>
        <h1>{{ detail.age1 }}</h1>
        <h1>{{ detail.hobby }}</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            studentDetail: [
                {
                    id: "01",
                    name: "洋洋",
                    detail: {
                        height1: "180cm",
                        age1: 19,
                        hobby: "肤白貌美大长腿",
                    },
                },
                {
                    id: "02",
                    name: "chaochao",
                    detail: {
                        height1: "177cm",
                        age1: 22,
                        hobby: "爱王洋洋",
                    },
                },
                {
                    id: "03",
                    name: "jianing",
                    detail: {
                        height1: "160cm",
                        age1: 18,
                        hobby: "面膜",
                    },
                },
            ],
            result: {},
            detail: {},
        };
    },
    mounted() {
        //   在挂载当中进行首次渲染
        // 从studentdetail中查找学号为$route.params.id的值
        // 本质 数组当中查找符合条件的某些
        // find
        console.log(this.studentDetail);
        console.log(this.$route.params.id);
        /*  this.result = this.studentDetail.find((item) => {
            return item.id == this.$route.params.id;
        });
        console.log(this.result); */
        // 由于mounted只挂载一次 不能及时更新数据
        // $route.params.id是不断发生变化的，一点击就变
        // 思路：当$route.params.id发生变化触发更新操作
        this.showItem(this.$route);
    },
    watch: {
        $route(value) {
            console.log(value);
            /*  this.result = this.studentDetail.find((item) => {
                return item.id == value.params.id;
            }); */
            this.showItem(value);
        },
    },
    methods: {
        showItem(value) {
            this.result = this.studentDetail.find((item) => {
                return item.id == value.params.id;
            });
            this.detail = this.result.detail;
        },
    },
};
</script>

<style lang="scss" scoped>

</style>